<template>
	<div class="check">
		<span>默认switch</span>
		<custom-switch v-model="valueDefault"></custom-switch>

		<span>自定义switch</span>
		<custom-switch
			v-model="valueCustom"
			active-color="#13ce66"
			inactive-color="#ff4949"
			activeValue="选中"
			inactiveValue="未选中"
			:width="60"
		></custom-switch>

		<span>disable switch</span>
		<custom-switch v-model="valueDisable" :disabled="true"></custom-switch>
		<br />
		<br />
		<el-button type="primary" @click="printSwitch">打印switch值</el-button>
	</div>
</template>

<script>
import customSwitch from '@/components/customSwitch.vue';
export default {
	name: 'check',
	components: {
		customSwitch,
	},
	data() {
		return {
			valueDefault: true,
			valueCustom: '未选中',
			valueDisable: true,
		};
	},
	methods: {
		printSwitch() {
			console.log(
				'默认' + this.valueDefault,
				'自定义' + this.valueCustom,
				'disabled' + this.valueDisable
			);
		},
	},
};
</script>
